<template>
    <div>
        <h2>我是{{name}}</h2>
        <h2>已经{{age}}岁了</h2>
        <button @click="add">点击岁数变大4岁</button>
        <button @click="addAge(6)">点击岁数变大6岁</button>
        <button @click="reAge">重置到20岁</button>
        <button @click="timeAge(10)">5s后自动重置到10岁</button>
        <my-text :lt="list">
            <!-- <template #ss="d">
         {{d.da.gender?'女':'男'}}
         {{d.ok.hobby}}
            </template> -->
            <template #ss="{da,ok}">
         {{da.gender?'女':'男'}}
         {{ok.hobby}}
            </template>
        </my-text>
    </div>
</template>

<script>
import MyText from './TextSon.vue'
import { mapActions, mapMutations, mapState } from 'vuex'
export default {
  components: { MyText },
  data() {
    return {
      list: [
        { name: 'lll', age: 55, gender: 0 },
        { name: 'dfl', age: 5, gender: 1 },
        { name: 'glc', age: 40, gender: 0 }
      ]
    }
  },
  computed: {
    ...mapState('test', ['name', 'age'])
  },
  methods: {
    ...mapMutations('test', ['addAge', 'reAge']),
    ...mapActions('test', ['timeAge']),
    add() {
      this.$store.commit('test/addAge', 4)
    }
  }
}
</script>

<style lang='' scoped></style>
